<template>
	<w-container class='pa-16'>
		<w-navbar id="my-nav" title="收货地址" bgColor='#fff' :navType="list.length ? 'address' : 'default'"
			@click="navbarChange"></w-navbar>

		<!-- 加载区 -->
		<block v-if="!list.length">
			<w-loading :type="loadingStatus" :emptyType="emptyType" class="mt-120"
				btnStyle="min-width: 264rpx;"></w-loading>
		</block>

		<!-- 列表区 -->
		<view class="ad_item mb-16" v-for="item in list" :key="item.address_id" @click="doAction(item)">
			<view class="name">
				<text>{{ item.name&&handleLang(item.name) }}</text>
				<text class="ml-8">{{ item.mobile }}</text>
			</view>
			<view class="info">
				{{ item.province&&handleLang(item.province) }}{{ item.city&&handleLang(item.city) }}{{ item.area&&handleLang(item.area) }}{{ item.address&&handleLang(item.address) }}
			</view>
			<view class="btn">
				<u-checkbox-group :value="[item.is_default]" @change="changeDef(item)">
					<view class="flex-center">
						<u-checkbox :name="1" shape="circle" active-color="#EE4C35" :size="16"></u-checkbox>
						<view class="font-color-999 font-size-12">{{handleLang('默认')}}</view>
					</view>
				</u-checkbox-group>
				<view class="flex">
					<w-button type="warning"  class="btnStyle mr-6"
						@click.native.stop="addressId=item.address_id;delAd=true">{{handleLang('删除')}}</w-button>
					<w-button  class="btnStyle"
						@click.native.stop="$u.route('/pages/my/address/edit',{id:item.address_id})">{{handleLang('修改')}}</w-button>
				</view>
			</view>
		</view>

		<!-- 对话框 -->
		<w-toast v-model="delAd" btnType="primary" :content="handleLang('确认要删除吗？')" contentAlign="center"
			@action="delAddFn"></w-toast>
	</w-container>
</template>

<script>
	import {
		address_list,
		add_edit_address,
		address_delete
	} from "@/api/address/index.js"
	export default {
		data() {
			return {
				list: [],
				delAd: false,
				addressId: '',
				emptyType: 'none', // addr
				loadingStatus: 'empty', // loading empty
				action: null
			};
		},
		onLoad({
			action
		}) {
			this.action = 'select'
			this.get_address_list();
			uni.$on('updateAddressList', () => {
				this.get_address_list();
			})
		},
		methods: {
			doAction(item) {
				if (this.action == 'select') {
					uni.$emit('addressSelect', item)
					uni.navigateBack()
				}

			},


			// 刷新
			refresh() {
				this.list = [];
				this.emptyType = 'none';
				this.loadingStatus = 'empty'
				this.get_address_list();
			},

			// 导航栏右边点击事件
			navbarChange() {
				this.list && uni.$u.route('/pages/my/address/edit')
			},

			// 获取地址列表
			get_address_list() {
				this.loadingStatus = 'loading'
				address_list().then(res => {
					uni.stopPullDownRefresh();
					this.loadingStatus = 'empty';
					this.list = res.data;
					this.list.length ? this.emptyType = 'none' : this.emptyType = 'addr';
				}).catch(err => {
					this.loadingStatus = 'empty';
					uni.stopPullDownRefresh();
				})
			},

			// 修改默认地址
			changeDef(item) {
				let {
					address_id,
					name,
					mobile,
					is_default
				} = item;
				let isdef = is_default == 1 ? 0 : 1;
				add_edit_address({
					id: address_id,
					s_name: name,
					s_phone: mobile,
					isdef,
					...item
				}).then(res => {
					uni.$u.toast(res.msg)
					this.list.forEach(items => {
						items.address_id == address_id ? items.is_default = isdef : items.is_default = 0
					})
				}).catch(err => {})
			},

			// 删除地址
			delAddFn(e) {
				if (!e) return;
				address_delete({
					id: this.addressId
				}).then(res => {
					uni.$u.toast(res.msg)
					setTimeout(() => {
						this.refresh()
					}, 1000)
				}).catch(() => {})
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.refresh()
		}
	}
</script>

<style lang="scss">
	.btnStyle {
		width: 104rpx;
		height: 44rpx !important;
		font-size: 20rpx;
		border-radius: 8rpx;
	}

	.ad_item {
		width: 100%;
		@extend .plr-12, .bg-color-item, .br-8;

		>.name {
			width: 100%;
			height: 100rpx;
			@extend .flex, .flex-ai-center;

			>text {
				@extend .font-size-16, .font-color-textPrimary;
			}
		}

		>.info {
			@extend .font-size-12, .font-color-999, .pb-12;
		}

		>.btn {
			width: 100%;
			height: 100rpx;
			// border-top: 2rpx solid #f2f2f2;


			@extend .flex-center-sb;
		}
	}
</style>